/**
 * Created by Administrator on 2017/2/21.
 */
//创建日历对象
function Calendar(){
//        获取显示整个日历的div
    var mainDiv = document.getElementById('calendar');

//    获取当前时间
    var now = new Date();
//    当前日历上正显示的月份
    var currentDate = new  Date();
    //设置当前显示月份的日期永远从1开始
    currentDate.setDate(1);

//   定义展示日历的方法
    this.show = function(){
        this.showToolBar();
        this.showWeek();
        this.showEveryDay();

    }

//定义日历头部的内容
    this.showToolBar = function(){

        var  toolBarDiv = document.createElement('div');
        toolBarDiv.style.marginTop = '10px';
        toolBarDiv.style.fontSize = '20px';
        mainDiv.appendChild(toolBarDiv);

        // 年月
        var dateSpan = document.createElement('span');
        dateSpan.style.paddingLeft = '10px';
        dateSpan.style.color = 'drakgrey';
        dateSpan.innerHTML = '<<' + currentDate.getFullYear() + '年' + (currentDate.getMonth() + 1) + '月'+ '>>';
        toolBarDiv.appendChild(dateSpan);


    };

    // 周一到周日
    this.showWeek = function() {

        console.log('周一到周日')

        var weekTable = document.createElement('table');
        weekTable.style.width = '100%';
        weekTable.style.marginTop = '20px'
        mainDiv.appendChild(weekTable);

        // 往表中插入一行
        var tr = weekTable.insertRow();

        //  周一 ~ 周六 周日
        for(var i = 1; i <= 7; i++) {
            // i   1~7
            var td = tr.insertCell();
            td.innerHTML = (i != 7) ? this.getWeekString(i) : '日';
            td.style.textAlign = 'center';
        }

    };

    // 周一到周日
    this.showWeek = function() {

        console.log('周一到周日')

        var weekTable = document.createElement('table');
        weekTable.style.width = '100%';
        weekTable.style.marginTop = '10px'
        mainDiv.appendChild(weekTable);

        // 往表中插入一行
        var tr = weekTable.insertRow();

        //  周一 ~ 周六 周日
        for(var i = 1; i <= 7; i++) {
            // i   1~7
            var td = tr.insertCell();
//                为下方定义的方法
            td.innerHTML = (i != 7) ? this.getWeekString(i) : '日';
            td.style.textAlign = 'center';
        }

    }
    // 每一天(比较难理解)
    this.showEveryDay = function() {

        // 这个月日历上的第一天
        var firstDate = this.getFirstDate();

        var dayTable = document.createElement('table');
        dayTable.style.width = '100%';
        mainDiv.appendChild(dayTable);

        for(var i = 0; i < 6; i++) {

            var tr = dayTable.insertRow();

            for(var j = 0; j < 7; j++) {

                var td = tr.insertCell()
                // 先把日期号展示出来
                td.innerHTML = firstDate.getDate();
                td.style.textAlign = 'center';
                td.style.padding = '5px 0';

                if(firstDate.getMonth() != currentDate.getMonth()) {
                    td.style.color = 'dimgrey';
                }
                // 将今天改为红色背景
                if(now.getFullYear() == firstDate.getFullYear() && now.getMonth() == firstDate.getMonth() && now.getDate() == firstDate.getDate()) {
                    td.style.color = 'red';
                }

                // 然后把日期对象中的日期号+1
                var day = firstDate.getDate();
                firstDate.setDate(day + 1);
            }

        }
    }

    // 转数字的周几  为  汉字的周几
    this.getWeekString = function(week) {
        // 0~6
        // 一 日
        var strArray = ['日', '一', '二', '三', '四', '五', '六'];

        return strArray[week];
    }

    // 获取到本月的日历上的第一天
    this.getFirstDate = function() {

        // 10-26    11-26    12-26

        // 根据时间戳 创建一个与currentDate 一模一样的日期对象
        var timeStamp = currentDate.getTime()
        var tempDate = new Date(timeStamp);

        // 获取本月1号是周几
        var week = tempDate.getDay();

        if(week == 0) {
            week = 7;
        }

        //  根据本月1号   往前减几天 能够变成 日历中的第一天
        //   周六      -4
        //   周四      -2
        //   周一     	1
        //   周五      -3

        tempDate.setDate(-(week - 2));
        return tempDate;
    }
};

var calendar = new Calendar();
calendar.show();

